{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <!-- 表单头部 -->
                <div class="box-header with-border">
                    <div class="btn-group">
                        <a class="btn flat btn-sm btn-default BackButton">
                            <i class="fa fa-arrow-left"></i>
                            返回
                        </a>
                    </div>
                </div>
                <!-- 表单 -->
                <form id="dataForm" class="form-horizontal dataForm" action="" method="post"
                    enctype="multipart/form-data">
                    <!-- 表单字段区域 -->
                    <div class="box-body">

                        <div class="form-group layui-form">
                            <label for="pic" class="col-sm-2 control-label">头像</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="layui-input-inline">
                                    <div class="layui-upload-list layui-btn" id="avatar">
                                        多图上传
                                    </div>
                                </div>
                                <div class="">
                                    <ul id="imgZmList" {if isset($data) && isset($data.avatar) && !empty($data.avatar)
                                        && $data.avatar !='' } class="imgZmList" {/if}> {if isset($data) &&
                                        isset($data.avatar) && !empty($data.avatar) && $data.avatar !='' } {foreach
                                        $data.avatar as $vo} <li style="position:relative"><img name="imgZmList[]"
                                            src="{$vo}" width="150" height="120">
                                        <div class="img_close" onclick="deleteElement(this)">X</div><input
                                            class="imghidden" type="hidden" name="avatar[]" value="{$vo}"></li>
                                        {/foreach}
                                        {/if}

                                    </ul>
                                </div>
                            </div>
                        </div>

                        {js href="__ADMIN_PLUGINS__/layui/layui.js" /}
                        {js href="__ADMIN_JS__/move.js" /}
                        {js href="__ADMIN_JS__/publishImg.js" /}
                        {js href="__ADMIN_CSS__/publish.css" /}
                        <script>
                            $(function () {
                                if (typeof (layui) == "undefined") {
                                    location.reload(true)
                                }
                                layui.use(['form', 'upload'], function () {
                                    var form = layui.form,
                                        $ = layui.jquery,
                                        upload = layui.upload;

                                    //证明多图片上传
                                    upload.render({
                                        elem: '#avatar',
                                        url: "{:url('upfile/upload')}",
                                        multiple: true,
                                        before: function (obj) {},
                                        done: function (res) {
                                            $('#imgZmList').append(
                                                '<li style="position:relative"><img name="imgZmList" src="' +
                                                res.data.url +
                                                '"width="150" height="120"><div class="img_close" onclick="deleteElement(this)">X</div><input class="imghidden" type="hidden" name="avatar[]" value="' +
                                                res.data.url + '"></li>').addClass(
                                                'imgZmList');

                                            form.render();
                                            imgMove("imgZmList");
                                            //上传完毕
                                        }
                                    });
                                });

                                imgMove("imgZmList");
                            });
                        </script>


                        <div class="form-group ">
                            <label for="username" class="col-sm-2 control-label" id="thumbName">用户名</label>
                            <div class="col-sm-10 col-md-4">
                                <img src="{$data.username|default=''}" id="srcimgusername"
                                    class="layui-upload-img  srcimgavatar">
                                <input type="hidden" name="username" id="inputimgusername"
                                    value="{$data.username|default=''}">
                                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                    <div class="layui-btn" id="editimgusername">请上传用户名</div>
                                </div>

                            </div>
                        </div>
                        <style>
                            .srcimgavatar {
                                width: 300px;
                                display: block;
                                margin: 1% 0px;
                            }
                        </style>
                        <script>
                            $(function () {
                                layui.config({
                                    base: '/static/admin/plugins/cropper/js/' //layui自定义layui组件目录
                                }).use(['form', 'croppers'], function () {

                                    var $ = layui.jquery,
                                        form = layui.form,
                                        croppers = layui.croppers,
                                        layer = layui.layer;
                                    //创建一个头像上传组件
                                    croppers.render({
                                        elem: '#editimgusername',
                                        saveW: 555 //保存宽度
                                            ,
                                        saveH: 355,
                                        mark: 555 / 355 //选取比例
                                            ,
                                        area: '900px' //弹窗宽度
                                            ,
                                        url: "{:url('upfile/upload')}" //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                                            ,
                                        done: function (data) { //上传完毕回调
                                            $("#inputimgusername").val(data.url);
                                            $("#srcimgusername").attr('src', data.url);
                                        }
                                    });

                                });
                            })
                        </script>

                    </div>
                    <!-- 表单底部 -->
                    <div class="box-footer">
                        {:token()}
                        <div class="col-sm-2">
                        </div>
                        <div class="col-sm-10 col-md-4">
                            {if !isset($data)}
                            <div class="btn-group pull-right">
                                <label class="createContinue">
                                    <input type="checkbox" value="1" id="_create" name="_create"
                                        title="继续添加数据">继续添加</label>
                            </div>
                            {/if}
                            <div class="btn-group">
                                <button type="submit" class="btn flat btn-info dataFormSubmit">
                                    保存
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="reset" class="btn flat btn-default dataFormReset">
                                    重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    /** 表单验证 **/
    $('#dataForm').validate({
        rules: {

        },
        messages: {

        }
    });
</script>
{/block}